<template>
    <section class="tongDao_manage intelligent-content-bg overflowYAll">
        <div class="intelligent-content-box">
  			<el-form :inline="true" :model="form" class=" origan-info-box" >
                <el-form-item >
                    <el-button type="primary"  @click="add">+ 注册通道</el-button>
                </el-form-item>
                <el-form-item >
                    <el-input  v-model="form.name" placeholder="请输入通道名称">
                        <el-button icon="el-icon-search" slot="append" @click="search"></el-button>
                    </el-input>
                </el-form-item>
            </el-form>
        	<table-diy :total="total" :tableTitle="tableTitle" :tableData="tableData"
        		 @detail="detailTable"
        		 @del = "del"
        		 @handleCurrentChange = "handleCurrentChange"
        		 @peizhi="peizhi"
        		 @updata="updataTable"></table-diy>
        	<el-dialog
			  :title="titleDiy"
			  :visible.sync="dialogVisible1"
			  v-if="dialogVisible1"
			  width="50%"
			  class="diy-dialog"
			  :append-to-body=true
			 >
			 <form-diy 
			 	:cleanData = "cleanData"
			 	:type="dialog1Type" 
			 	:content = "currentPage" 
			 	:formData="formData" 
			 	:formLabel="formLabel"
			 	:formUpdata="formUpdata"
			 	@insertData = "insertData"
			 	@UpdataData = "UpdataData"
			 	@emitSelectWangduan = "emitSelectWangduan"
                @dialogVisible1Cancel="dialogVisible1Cancel"
                @peizhiSubmit = "peizhiSubmit"
			 	></form-diy>
			 </el-dialog>
			 
			 <el-dialog
			  :title="titleDiy"
			  :visible.sync="dialogVisible2"
			  v-if="dialogVisible2"
			  width="50%"
			  class="diy-dialog"
			  :append-to-body=true
			 >
			 <form-tongdao
			 :dataOriginId = "dataOriginId"
			 @UpdataData ="UpdataData"
			 @insertData="insertData"
			 @onCancel = "onCancel"
			 @onSubmit = "onSubmit"
			 ></form-tongdao>
			 </el-dialog>
			
        </div>
    </section>
</template>

<script>
	import {
		computedChanelSearch,
		computedChanelDetail,
		computedGetAreaAll,
		computedInsertData,
		computedChanelDetail2,
		computedChannelUpdata,
		computedChanelDel
	} from "./css_js_img/computedareaResource"
    import tableDiy from './components/tableDiy'
//  import formOrigin from './components/formOrigin'
    import formDiy from './components/formDiy'
	import formTongdao from "./components/formTongdao"
    export default {
    	components:{
    		tableDiy,
    		formDiy,
    		formTongdao/*由于通道的功能比之前增加了很多，之前封装的form表单，若强行改代码会容易出bug，故重写一个formTongdao的专属表单*/
    	},
        data() {
          return {
          		cleanData:false,
          		total:0,
          		dataOriginId:0,
          		currentPage:'dataOrigin',
          		titleDiy:'',
          		dialog1Type:'',
          		dialogVisible1:false,
          		dialogVisible2:false,
          		form:{
          			name:'',
          			pageNum:1,
          			pageSize:10
          		},
          		tableData: [],
		        tableTitle:{
		        	name:'通道名称',
		        	type:'类型',
		        	areName:'IP地址',
		        	aaAreaId:'A端区域',
		        	bbAreaId:'B端区域',
		        	daihuan:'带宽',
		        },
		        formLabel:[],
		        formAdd:[
		        	{
		        		show:'normal',
		        		label:'通道名称',
		        		placehold:'请输入通道名称',
		        		type:'input',
		        		diyWidth:'350px',
		        		modelData:"name",
		        		inputAfter:' ',
		        	},
		        	{
		        		show:'disabled',
		        		label:'通道标识',
		        		placehold:'由系统自动生成',
		        		type:'input',
		        		diyWidth:'350px',
		        		modelData:"da",
		        		inputAfter:' ',
		        	},
		        	{
		        		show:'normal',
		        		label:'类型',
		        		placehold:'',
		        		type:'select',
		        		diyWidth:'150px',
		        		modelData:"type",
		        		inputAfter:' ',
		        		options:[
		        			{
		        				name:"实时接口",
		        				id:1
		        			},
		        			{
		        				name:"FTP",
		        				id:2
		        			}
		        		],
		        	},
		        	{
		        		show:'normal',
		        		label:'A段区域',
		        		placehold:'',
		        		type:'select',
		        		diyWidth:'150px',
		        		modelData:"aaAreaId",
		        		inputAfter:' ',
		        		options:[
		        			{
		        				name:"dawd",
		        				id:'dawdaw'
		        			},
		        			{
		        				name:"发我打",
		        				id:'dadwa'
		        			}
		        		],
		        	},
		        	{
		        		show:'normal',
		        		label:'B段区域',
		        		placehold:'',
		        		type:'select',
		        		diyWidth:'150px',
		        		modelData:"bbAreaId",
		        		inputAfter:' ',
		        		options:[
		        			{
		        				name:"dawd",
		        				id:'dawdaw'
		        			},
		        			{
		        				name:"发我打",
		        				id:'dadwa'
		        			}
		        		],
		        	},
		        	{
		        		show:'normal',
		        		label:'A端FTP地址',
		        		placehold:'请输入地址',
		        		type:'input',
		        		diyWidth:'350px',
		        		modelData:"aaAddress",
		        		inputAfter:' ',
		        	},
		        	{
		        		show:'normal',
		        		label:'B端FTP地址',
		        		placehold:'请输入地址',
		        		type:'input',
		        		diyWidth:'350px',
		        		modelData:"bbAddress",
		        		inputAfter:' ',
		        	},
		        	
		        ],
		        formPeizhi:[
		        	{
		        		show:'normal',
		        		label:'请选择通道的负载均衡策略',
		        		placehold:'',
		        		type:'radioGroup',
		        		modelData:"dawdaw",
		        		inputAfter:' ',
		        		radios:[
		        			{
		        				name:'随机方式',
		        				id:"1"
		        			},
		        			{
		        				name:'轮询方式',
		        				id:"2"
		        			},
		        			{
		        				name:'权重策略',
		        				id:"3"
		        			},
		        		],
		        	},
		        	{
		        		show:'normal',
		        		label:'通道1',
		        		placehold:'请输入通道权重值',
		        		type:'input',
		        		diyWidth:'150px',
		        		modelData:"gesges",
		        		inputAfter:' ',
		        	},
		        	{
		        		show:'normal',
		        		label:'通道2',
		        		placehold:'请输入通道权重值',
		        		type:'input',
		        		diyWidth:'150px',
		        		modelData:"ges3ges",
		        		inputAfter:' ',
		        	},
		        	{
		        		show:'normal',
		        		label:'通道3',
		        		placehold:'请输入通道权重值',
		        		type:'input',
		        		diyWidth:'150px',
		        		modelData:"daada",
		        		inputAfter:' ',
		        	},
		        ],
		        formData:[
		        	{
		        		label:'通道名称',
		        		value:'',
		        	},
		        	{
		        		label:'类型',
		        		value:'',
		        	},
		        	{
		        		label:'A端区域',
		        		value:'',
		        	},
		        	{
		        		label:'B端类型',
		        		value:'',
		        	},
		        	{
		        		label:'A端FTP地址',
		        		value:'',
		        	},
		        	{
		        		label:'B端FTP地址',
		        		value:'',
		        	},
		        ],
		        formUpdata:{
		        	name:'',
		        	type:"",
		        	aaAreaId:'',
		        	bbAreaId:'',
		        	aaAddress:'',
		        	bbAddress:'',
		        	aaAddressBack:'',
		        	bbAddressBack:"",
		        	netSize:'3',
		        	weight:'1',
		        	id:0
		        },
		        dataType:["","csv文件","mysql5.7","oracle11","xml文件","json文件"],
          };
        },
        methods: {
        	add(){
        		this.dataOriginId = 0;
        		this.cleanData = !this.cleanData;
        		this.titleDiy = '注册通道'
        		this.dialog1Type = 'add';
//      		computedGetAreaAll(this);
//      		this.formLabel = this.formAdd;
        		this.dialogVisible2 = true;
        	},
        	detailTable(scope){/*tabel的详情*/
        		this.cleanData = !this.cleanData;
        		console.log(scope);
        		this.dataOriginId=scope.row.id;
        		computedChanelDetail(this);
        		this.titleDiy = '详情页面'
        		this.dialog1Type = 'detail';
        		this.dialogVisible1 = true;
        	},
        	updataTable(scope){/*table的修改*/
        		this.cleanData = !this.cleanData;
        		console.log(scope);
        		this.dataOriginId = scope.row.id;
        		this.formLabel = this.formAdd;
//      		computedGetAreaAll(this);/*获取option让用户选*/
//      		computedChanelDetail2(this);/*获取详情让用户看*/
        		this.titleDiy = '修改通道信息'
        		this.dialog1Type = 'updata';
        		this.dialogVisible2 = true;
        	},
        	search(){
        		computedChanelSearch(this);
        	},
        	del(scope){
        		computedChanelDel(this,scope.row.id);
        	},
        	insertData(val){/*插入到数据库*/
        		console.log(val);
//      		val.aaAddressBack='aa';
//      		val.bbAddressBack='aa';
        		val.netSize='6';
        		val.weight='1';
        		console.log(val);
        		computedInsertData(this,val);
        	},
        	onSubmit(value){
        		console.log(value);
        		val.netSize='6';
        		val.weight='1';
//      		computedInsertData(this,val);
        	},
        	UpdataData(val){/*更新数据*/
//      		console.log(val);
				computedChannelUpdata(this,val);
        	},
        	peizhiSubmit(val){
        		console.log(val);
        		alert("通道的配置接口")
        	},
        	handleCurrentChange(val){
        		console.log(val);
        		this.form.pageNum = val;
        		this.search();
        	},
        	emitSelectWangduan(val){
        	},
        	peizhi(val){
        		console.log(val);
        		this.dataOriginId = val.row.id;
        		this.titleDiy = '策略配置'
        		this.dialog1Type = 'peizhi';
        		this.formLabel = this.formPeizhi;
        		this.dialogVisible1 = true;
        	},
        	closeForm(){
        		this.dialogVisible1 = false;
        	},
        	onCancel(){
        		this.dialogVisible2 = false;
        	},
            dialogVisible1Cancel(){
                this.dialogVisible1 = false;
            },
        },
        mounted(){
        	this.search();
//      	componentGetArea(this,{segment:53});
        }
  };
</script>

<style>
	.tongDao_manage .form1{
		margin: 10px;
	    border-bottom: dashed 1px #a7a4a4;
	    padding-bottom: 25px;
	}
    @keyframes dialog-fade-in {
      0% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
      100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    @keyframes dialog-fade-out {
      0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
      100% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
    }   
</style>